<template>
    <p>1.参与编译的资源加载</p>
    <ul>

        <li>
            img的静态src 加载
            <img src="@/index/assets/logo.png" alt="">

        </li>
        <li>
            单文件组件的 style标签中的 样式图片加载
            <div class="bulid-img"></div>

        </li>
        <li>
            以模块方式加载资源文件
            <div :style="`background-image:url('${img}')`"></div>

        </li>
    </ul>
    <p>不参与编译的图片</p>
    <ul>
        <li>
            以http|https|网络路径 协议定义的绝对路径图片
            <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">

        </li>
        <li>
            单文件组件中 标签 行内样式中加载的图片
            <!-- <div style="background-image:url('/img/logo.png')"></div> -->
            使用require



            <!-- <div  :style=" 'background-image: url('+ require('../../assets/dome011111.jpg') +')' "></div> -->
            在vue的数据仓库中定义并加载 资源文件，触发资源文件的模块加载
            <div :style="`background-image:url('${img}')`"></div>
        </li>
    </ul>




</template>
<script>

import dome011111 from '../../assets/dome011111.jpg'
console.log(dome011111);

export default {
    data() {
        return {
            img: dome011111
        }
    }
}
</script>
<style>
.bulid-img {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background-image: url("@/index/assets/dome01.jpg");
    background-size: 100% 100%;
}
</style>